/**
 * @author of2198
 * @date 2017/6/2.
 * @description
 */

import React, { Component } from 'react';
import { Relax } from 'iflux2';
import { transformURL } from 'util/image';
import { fromJS } from 'immutable';
import _ from 'util';
import noop from 'util/noop';

const ThumbUrl = 'http://pic.qianmi.com/astore/d2c-wx/images/goods-default.png';
const DefaultNews = fromJS([
    {
        author: '',
        content: '',
        content_source_url: '',
        digest: '',
        need_open_comment: 0,
        only_fans_can_comment: 0,
        show_cover_pic: 0,
        thumb_media_id: '',
        thumb_url: '',
        title: '',
        url: ''
    }
]);

@Relax
export default class LeftLiveEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            keywordBtnVisible: false,
            keywordIndex: -1
        }
    }
    static defaultProps = {
        tabs: '',
        curItem: {},
        curIndexInItem: 0,
        _addNewsValue: noop,
        _setNewsIndex: noop,
        _deleteNews: noop
    };

    render() {
        const { tabs, curItem, curIndexInItem } = this.props;
        let news = curItem.getIn(['content', 'news_item']) || DefaultNews;
        let adNews = curItem.getIn(['articles']) || DefaultNews;
        let list = tabs == 'news' ? news : adNews;
        let now = new Date().getTime();

        return (
            <div className="editLeft">
                <div className="ehead">{news ? '微信图文' : '高级图文'}<span className="back">{'< 返回'}</span></div>
                <ul className="econtent">
                    {
                        list.map((v, i) => {
                            if (i == 0) {
                                return (<li onClick={() => { this._setItem(i) }} className="singleNews">
                                    <h1>{v.get('title') || '标题'}</h1>
                                    <div className="createTime">
                                        {_.getTime(curItem.get('update_time') || curItem.get('updatedAt') || now)}
                                    </div>
                                    <img src={transformURL(v.get('thumb_url') || ThumbUrl)} alt="" />
                                    <p style={{ wordBreak: "break-all"}}>{v.get('digest') || '简单描述'}</p>
                                    <div className="read">阅读原文</div>
                                </li>)
                            }
                            return (
                                <li onClick={() => { this._setItem(i) }}
                                    onMouseEnter={() => this.setState({
                                        keywordBtnVisible: true,
                                        keywordIndex: i
                                    })}
                                    onMouseLeave={() => this.setState({
                                        keywordBtnVisible: false,
                                        keywordIndex: -1
                                    })}
                                    className={`tinyNews${curIndexInItem == i ? ' active' : ''}`}>
                                    <p style={{ wordBreak: "break-all"}}>{v.get('digest') || '简单描述'}</p>
                                    <img src={transformURL(v.get('thumb_url') || ThumbUrl)} />
                                    {
                                        !(curItem.get('media_id') || curItem.get('id')) && (
                                            <a style={{ display: (this.state.keywordBtnVisible && this.state.keywordIndex === i) ? "block" : "none" }} onClick={() => this._deleteItem(i)}>
                                                <i className="qmIcon close" />
                                            </a>
                                        )
                                    }
                                </li>
                            )
                        })
                    }
                    {
                        (list.size < 8 && !(curItem.get('media_id') || curItem.get('id')))
                        &&
                        <li onClick={this._addItem} className="addNewItem"><span>+</span><span>新增</span></li>
                    }
                </ul>
            </div>
        )
    }

    //修改当前正在编辑的条目
    _setItem = (i) => {
        this.props._setNewsIndex(i)
    }

    //新增一条图文中的条目
    _addItem = () => {
        const newItem = {
            author: '',
            content: '',
            content_source_url: '',
            digest: '',
            need_open_comment: 0,
            only_fans_can_comment: 0,
            show_cover_pic: 0,
            thumb_media_id: '',
            thumb_url: '',
            title: '',
            url: ''
        };
        this.props._addNewsValue(fromJS(newItem))
    }

    _deleteItem = (index) => {
        this.props._deleteNews(index);
    }
}
